import React from "react";
import { Route, NavLink } from "react-router-dom";

import Header from "./components/Header";
import Home from "./pages/Home/index";
import About from "./pages/About";

function App() {
  return (
    <div className="app">
      <Header a="1" b="2" />
      <div className="main">
        <div className="left">
          {/* 导航区 */}

          {/* 
            NavLink 组件会在当前 路径匹配时，自动添加 active 类名
                    可以设置 activeClassName 这个属性来修改默认的 active 类名
          */}
          <NavLink className="link" to="/home" activeClassName="hello">
            Home
          </NavLink>
          <NavLink className="link" to="/about" activeClassName="hello">
            About
          </NavLink>
        </div>
        <div className="right">
          {/* 展示区，根据不同的url地址，展示不同的组件 */}

          {/* 一条路由规则 当 url 满足 /home 时，这块位置就会渲染为 Home 组件 */}
          <Route path="/home" component={Home} />
          {/* 一条路由规则 当 url 满足 /about 时，这块位置就会渲染为 About 组件 */}
          <Route path="/about" component={About} />
        </div>
      </div>
    </div>
  );
}

export default App;
